<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>机蜂博客</title>
    <base href="<%=request.getContextPath()%>/">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <link rel="stylesheet" href="static/common/css/base.css">
    <link rel="stylesheet" href="static/common/css/article-list.css">
    <link rel="stylesheet" href="static/common/css/author-list.css">
    <script src="static/jquery/jquery.js"></script>
    <script src="static/jquery/js.cookie.js"></script>
    <script src="static/layui/layui.js"></script>
    <link rel="icon" href="static/images/favicon.ico">
    <style>
        .main .body .content .left {
            width: 700px;
        }

        .main .body .content .right {
            height: 900px;
            width: 30%;
        }

        .main .body .content .right .ad {
            height: 400px;
            overflow: hidden;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 10px;
        }

        .main .body .content .right .ad img {
            display: block;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="header">
        <div class="nav">
            <div class="layui-row">
                <div class="layui-col-md2">
                    <div class="logo">
                        <a href="">
                            <img id="logo" src="" alt="">
                        </a>
                    </div>
                </div>
                <div class="layui-col-md8">
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <ul class="menu">
                                <li class="menu-item">
                                    <a class="menu-active" href="page/index">
                                        <i class="layui-icon layui-icon-find-fill"></i>
                                        首页
                                    </a>
                                </li>
                                <li class="menu-item">
                                    <a href="page/category">
                                        <i class="layui-icon layui-icon-template-1"></i>
                                        分类
                                    </a>
                                </li>
                                <li class="menu-item">
                                    <a href="page/author">
                                        <i class="layui-icon layui-icon-group"></i>
                                        作者
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="layui-col-md6">
                            <div class="search">
                                <div class="search-group">
                                    <input id="search" type="text" placeholder="热门搜索">
                                    <i id="searchBtn" class="layui-icon layui-icon-search"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <div class="user">
                                <div class="avatar">
                                    <a id="dropMenu" href="javascript:;">
                                        <img id="vipAvatar" src="static/upload/avatar/defaultAvatar.jpg"
                                             class="layui-nav-img">
                                        <span id="vipName"></span>
                                    </a>
                                </div>
                                <div class="login">
                                    <div class="login-btn">
                                        <a href="javascript:;" onclick="showLoginWin(0)">登录</a>
                                    </div>
                                    <div class="reg-btn">
                                        <a href="javascript:;" onclick="showLoginWin(1)">注册</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="apply">
                                <div class="apply-btn">
                                    <a href="javascript:;">
                                        <i class="layui-icon layui-icon-edit"></i>
                                        发布文章
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="body">
        <div class="content">
            <div class="left" id="hotArticle">

            </div>
            <div class="right">
                <div class="banner">
                    <div class="ad">
                        <div class="layui-carousel" id="bannerList" lay-filter="bannerList">
                            <div carousel-item id="bannerGroup">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="author">
                    <div class="show">
                        <p>推荐作者</p>
                    </div>
                    <div id="hotAuthor" class="author-list">

                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <p>备案信息：<span id="copy"></span></p>
            <p>公司地址：<span id="address"></span> | 联系方式：<span id="phone"></span></p>
        </div>
    </div>
</div>
</body>
<script src="static/common/js/ajax.js"></script>
<script src="static/common/js/base.js"></script>
<script src="static/common/js/article.js"></script>
<script src="static/common/js/author.js"></script>
<script>
    $(function () {
        getHotArticle();
        getHotAuthor();
        getBannerList();
    })

    function getHotArticle() {
        http.get('blog/hot/article', null, function (res) {
            createArticleList("hotArticle", res.data)
        })
    }

    function getHotAuthor() {
        http.get('blog/hot/author', null, function (res) {
            createAuthorList("hotAuthor", res.data)
        })
    }

    function getBannerList() {
        http.get('blog/banner', null, function (res) {
            let $html = '';
            for (const banner of res.data) {
                $html += '<div><a href="' + (banner.href || "javascript:;") + '" target="' + banner.target + '"><img src="static/upload/' + banner.src +
                    '" alt="' + (banner.name || banner.src) + '"></a></div>';
            }
            $("#bannerGroup").empty().append($html);
            const carousel = layui.carousel;
            carousel.render({
                elem: "#bannerList",
                width: "100%",
                height: "100%"
            });
        })
    }


</script>
</html>
